<script lang="ts" setup>
import { getCurrentInstance, onMounted } from "@vue/runtime-core";
import storage from "../../util/storage";
const { proxy }  = getCurrentInstance();

onMounted(() => {
  // 检测是否已经有token，否则跳转到登录
  const _token = storage().get('token')
  if (!_token) {
    // 未登录，直接跳转到登录页面
    proxy.$router.push('/login')
    return
  }
})
const openQrcode = () => {
  proxy.$router.push('/qrcode')
}
</script>

<template>
  <div class="index-container">
    <div class="index-header index-header-green">
      <div class="car-detail">
        浙J 12353
        <van-tag>车辆在线</van-tag>
        <van-tag>定位有效</van-tag>
        <img src="/src/assets/refresh.png" >
      </div>
      <div class="header-updatetime">
        更新于2020年03月01日 16:01:22
      </div>
      <div class="header-qrcode">
        <img
          src="/src/assets/qrcode.png"
          alt="二维码"
          @click="openQrcode"
        >
      </div>
      <div class="score-box">
        <span class="score">
          20
        </span>
        分
        <van-icon name="question-o" />
      </div>
    </div>
    <!-- <van-button type="primary">
    </van-button> -->
  </div>
</template>

<style lang="scss" scoped>
.index-container {
  .index-header-red {
    background: linear-gradient(180deg, #FE4947 0%, rgba(254, 73, 71, 0) 100%);
  }
  .index-header-yellow {
    background: linear-gradient(180deg, #FEA43A 0%, rgba(254, 164, 58, 0) 100%);
  }
  .index-header-green {
    background: linear-gradient(180deg, #41CBAB 0%, #FFFFFF 100%);
    background-image: url('/src/assets/qrcode-green.png');
  }
  .index-header {
    width: 100%;
    height: 166px;
    position: relative;
    text-align: left;
    padding: 16px 16px;
    background-repeat: no-repeat;
    background-size: cover;
    .car-detail {
      color: white;
    }
    .header-updatetime {
      font-size: 14px;
      color: #FFFFFF;
    }
    .header-qrcode {
      position: absolute;
      top: 10px;
      right: 16px;
      width: 44px;
      height: 44px;
    }
    .score-box{
      margin-top: 39px;
      .score{
        font-size: 58px;
        color: #10C876;
        line-height: 81px;
        letter-spacing: 2px;
      }
    }
  }
}
</style>
